<template>
  <div>
    <div class="header">
      <h2>{{title}}</h2>
      <p>{{content}}</p>
    </div>
    <div class="container">
<!--      <div class="image-container" v-for="(item, index)  in imgList" v-bind:key="index">
        <OSSUploadImage v-bind:imageItem="item"/>
        <div class="del-button" v-if="item && item.showDelete" v-on:click="onDelete(index)">x</div>
      </div>-->
      <label class="upload-button">上传文件
        <input type="file" v-on:change="selectPhoto">
      </label>
    </div>
  </div>
</template>

<script>
  import OSSUploadImage from './OSSUploadImage'

  export default {
    name: 'OSSUpload',
    components: {OSSUploadImage},
    props: {
      imgList: Array,
      title: String,
      content: String,
    },
    data: function () {
      return {
        tempFile: null,
      }
    },
    methods: {
      selectPhoto: function (event) {
        this.$emit('onFileSelected', event.target.files[0])
        event.target.value = null
      },
      onDelete: function (item) {
        this.$emit('onImageDelete', item)
      },
    }
  }
</script>

<style scoped>

  .header {
    display: flex;
    align-items: baseline;
    border-bottom: 2px solid #ddd;
  }

  .header p {
    margin-left: 20px;
  }

  .upload-button {
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    margin-top: 10px;
  }

  .upload-button input {
    visibility: hidden;
  }

  .container {
    display: flex;
    justify-content: flex-start;
    padding: 10px;
    overflow: hidden;
    flex-wrap: wrap;
    position: relative;
    box-sizing: border-box;
  }

  .container img {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    margin-top: 10px;
    border: 1px #ddd solid;
  }

  .image-container {
    position: relative;
  }

  .image-container .del-button {
    width: 28px;
    height: 28px;
    text-align: center;
    position: absolute;
    right: 6px;
    top: 6px;
    background: #f00;
    font-size: 22px;
    border-radius: 50%;
    /*border: 2px solid #fff;*/
    color: #fff;
  }

</style>
